<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height: 60px">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click="isShowDialog=true"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <!-- table 绑定data是数据数组
            里面每个对象都是一行
            el-table-column 渲染的是每列的内容, 用 prop 属性指定
            table data 数据中的对象那个字段会显示在当前列 -->
            <el-table :data="roleList" border="">
              <el-table-column prop="name" label="角色名称" width="240" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作">
                <!-- 作用域插槽可以在 template 上定义一个对象, 接收所有子组件回传回来的数据
                一般这个对象叫 scope -->
                <template v-slot="scope">
                  <el-button size="small" type="success" @click="showPerm(scope.row.id)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="showEdit(scope.row.id)">编辑</el-button>
                  <el-button size="small" type="danger" @click="delRole(scope.row.id)">删除</el-button>
                </template>

              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-row
              type="flex"
              justify="center"
              align="middle"
              style="height: 60px"
            >
              <!-- 分页组件 -->
              <el-pagination
                layout="prev,pager,next"
                :page-size="pageSetting.pagesize"
                :total="total"
                @current-change="currentChange"
              />
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司信息">
            <el-form label-width="120px" style="margin-top: 50px">
              <el-form-item label="公司名称">
                <el-input v-model="companyInfo.name" disabled style="width: 400px" />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="companyInfo.companyAddress" disabled style="width: 400px" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="companyInfo.mailbox" disabled style="width: 400px" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="companyInfo.remarks"
                  type="textarea"
                  :rows="3"
                  disabled
                  style="width: 400px"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 弹窗占位 绑定一个打他布尔值决定是否显示弹窗 -->
      <el-dialog :title="formData.id?'编辑':'新增'" :visible="isShowDialog" @close="btnCancel">
        <!-- el form 绑定 model 数据对象 rules 规则对象
        el form item prop 字段名字符串 -->
        <el-form ref="addForm" :model="formData" :rules="rules">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="btnOk">确定</el-button>
          <el-button @click="btnCancel">取消</el-button>
        </template>
      </el-dialog>
      <!-- 设置角色权限的弹窗 -->
      <el-dialog title="分配权限" :visible="isShowPerm" @close="btnCancelPerm">
        <!-- 多选框组渲染 -->
        <!-- 多选框组容器 -->
        <el-checkbox-group v-model="checkList">
          <!-- 遍历的是多选框 -->
          <!-- 我们希望用树形来显示 -->
          <el-tree :data="permList" default-expand-all>
            <template v-slot="scope">
              <el-checkbox
                :key="scope.data.id"
                :label="scope.data.id"
              >
                {{ scope.data.name }}
              </el-checkbox>
            </template>
          </el-tree>

        </el-checkbox-group>
        <template>
          <el-button type="primary" @click="btnOkerm">确定</el-button>
          <el-button @click="btnCancelPerm">取消</el-button>
        </template>

      </el-dialog>
    </div>
  </div>
</template>

<script>
import { assignPrem, addRole, getCompanyInfo, getRoleList, getRoleDatail, editRole, delRole } from '@/api/setting'
import { getPermissionList } from '@/api/permission'
import { listToTreeData } from '@/utils'
export default {
  data() {
    return {
      // 设置角色权限的数据
      isShowPerm: false,
      // 当前被选中
      checkList: [],
      // 总表
      permList: [],
      roleId: '',
      companyInfo: {},
      roleList: [],
      pageSetting: {
        page: 1,
        pagesize: 5
      },
      total: 0,
      // 以下是新增表单相关数据
      isShowDialog: false,
      formData: {
        name: '',
        description: ''
      },
      // 规则
      rules: {
        name: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '2-6位之间', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '5-20位之间', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // 进入页面
    // 获取公司信息
    this.companyInfo = await getCompanyInfo(this.$store.state.user.userInfo.companyId)
    // console.log(74, this.companyInfo)
    // 获取角色列表数据
    this.loadPage()
    // 进入页面获取总权限列表，方便一会儿修改使用
    this.permList = listToTreeData(await getPermissionList(), '0')
  },
  methods: {
    async showPerm(id) {
      // 根据id获取当前正在点击角色详情
      const res = await getRoleDatail(id)
      console.log(res)
      // 这里是给角色设置权限，点击开弹窗，获取到当前点击的角色数据
      // 应该赋值给 checkList
      this.roleId = id
      this.checkList = res.permIds
      this.isShowPerm = true
    },
    async btnOkerm() {
      // 发请求
      await assignPrem({ id: this.roleId, permIds: this.checkList })
      // 提示用户
      this.$message.success('操作成功')
      // 关闭弹窗
      this.isShowPerm = false
    },
    async btnCancelPerm() {
      this.checkList = []
      this.isShowPerm = false
    },
    async delRole(id) {
      await this.$confirm('是否确认')
      // 发请求
      await delRole(id)
      // 更新页面
      this.loadPage()
      // 提醒用户
      this.$message.success('删除成功')
    },
    async showEdit(id) {
      // console.log('编辑角色的id', id)
      // 还需要知道正在编辑的是哪个角色
      // 拿回数据进行表单回显
      this.formData = await getRoleDatail(id)
      // 这里要弹窗
      this.isShowDialog = true
    },
    currentChange(newPage) {
      // console.log(newPage)
      this.pageSetting.page = newPage
      this.loadPage()
    },
    async loadPage() {
      // 获取角色列表数据
      const res = await getRoleList(this.pageSetting)
      // console.log(97, res)
      this.total = res.total
      this.roleList = res.rows
    },
    async btnOk() {
      try {
        // 表单校验
        await this.$refs.addForm.validate()
        // 发请求
        // 提醒用户
        if (this.formData.id) {
          await editRole(this.formData)
          this.$message.success('修改成功')
        } else {
          await addRole(this.formData)
          this.$message.success('添加成功')
        }
        // 关闭弹窗
        this.isShowDialog = false
        // 更新页面
        this.loadPage()
        // 清理数据
        this.formData = {
          name: '',
          description: ''
        }
      } catch (err) {
        console.log(err)
      }
    },
    btnCancel() {
      this.isShowDialog = false
      // 手动清理数据, 在新增的时候不太必要, 因为
      // resetFields 已经处理过, 但是因为resetFields只会清理默认的绑定数据
      // 编辑会多出一些本来没有的内容, 需要手动删除
      this.formData = {
        name: '',
        description: ''
      }
      // 移除校验结果非常好用，单是不能依赖它清理数据
      this.$refs.addForm.resetFields()
    }
  }
}
</script>

<style>

</style>
